@extends('mobile.layouts.default')
@section('title', '登录/注册')

@section('content')
    <nav class="nav navbar-light w-100 bg-white">
        <div class="container d-flex flex-row justify-content-between align-items-center">
            <div class="back-ico mr-2">
                <a class="fas fa-chevron-left text-dark" href="{{ route('recharge.index') }}"></a>
            </div>
        </div>
    </nav>

    <div class="alert alert-warning position-fixed fixed-top" role="alert"></div>

    <div class="register-header d-flex flex-column container mt-5 pt-5 pl-4 pr-4">
        <img src="/assets/common/images/logo_s.png" width="50" alt="">
        <h4 class="mt-3">{{ env('APP_NAME')}}会员登录/注册</h4>
        <span>未注册用户完成验证自动注册为新用户</span>
    </div>

    <div class="register-inner container mt-5 pl-4 pr-4">
        <input type="hidden" name="verification_key" id="reKey" value="">
        <div class="form-row d-flex justify-content-between">
            <div class="form-group col-4">
                <label for="country">国家</label>
                <select class="form-control country-select" id="country">
                    <option value="cn">+86 中国</option>
                    <option value="th">+66 泰国</option>
                </select>
            </div>
            <div class="form-group col-8">
                <label for="cellphone" class="cellphone_info">手机号码</label>
                <input type="text" class="form-control" maxlength="11" id="cellphone" name="cellphone" autocomplete="off" placeholder="请输入手机号码">
            </div>
        </div>

        <div class="form-row d-flex align-items-end justify-content-between mt-4">
            <div class="form-group col-8">
              <label for="vificode">验证码</label>
              <input type="text" class="form-control" maxlength="4" id="vificode">
            </div>
            <div class="form-group col-4">
              <button type="button" class="btn btn-primary btn-send-code" disabled="disabled">获取验证码</button>
            </div>
        </div>

        <div class="form-submit mt-4">
            <button type="button" class="btn btn-primary w-100 btn-lg user-login" disabled="disabled">登录/注册</button>
        </div>
    </div>

    @include('mobile.layouts.footer')
@stop

@push('page-css')
    <link rel="stylesheet" type="text/css" href="/assets/mobile/css/register.css?20200709v06">
@endpush

@push('page-js')
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            // 验证手机号
            function isPhoneNo(phone) {
                if(phone.length == 11) {
                    var pattern = /^((0[0-9])|(13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|195|198|199)\d{8}$/;
                } else {
                    var pattern = /^((0[6|8|9]))\d{8}$/;
                }
                return pattern.test(phone);
            }

            $("#country").change(function(){
                //获取国家状态
                if($("#country").val() == 'cn') {
                    $('#cellphone').attr("maxlength", 11);
                    $('.cellphone_info').text('中国号码');
                } else {
                    $('#cellphone').attr("maxlength", 10);
                    $('.cellphone_info').text('泰国号码(06/08/09开头)');
                }
            });

            /*手机号判断*/
            $('#cellphone').bind('input propertychange',function() {
                var check_length = $('#cellphone').attr("maxlength");
                if ($(this).val().length == check_length) {
                    if (isPhoneNo($.trim($(this).val())) == false) {
                        $(".alert-warning").show().text('请输入正确的手机号码');
                        $(this).removeClass("is-valid").addClass("is-invalid");
                        $(".btn-send-code").attr("disabled","disabled");
                    } else {
                        $(".alert-warning").hide()
                        $(this).removeClass("is-invalid").addClass("is-valid");
                        $(".btn-send-code").removeAttr("disabled");
                    }

                }

                if ($(this).val().length < check_length) {
                    $(".btn-send-code").attr("disabled", "disabled");
                        $(this).removeClass("is-valid");
                }

                $(this).blur(function(){
                    if ($(this).val().length == '') {
                        $(this).removeClass("is-invalid").removeClass("is-valid");
                    }
                });
            })

            // 验证验证码
            function isVerifi(vcode) {
                var pattern = /^[0-9]{4}$/;
                return pattern.test(vcode);
            }

            /*验证码判断*/
            $('#vificode').bind('input propertychange',function() {
                if ($(this).val().length == 4) {
                    if (isVerifi($.trim($(this).val())) == false) {
                        $(".alert-warning").show().text('请输入正确的验证码');
                        $(this).removeClass("is-valid").addClass("is-invalid");
                        $(".user-login").attr("disabled","disabled");
                    } else {
                        $(".alert-warning").hide()
                        $(this).removeClass("is-invalid").addClass("is-valid");
                        $(".user-login").removeAttr("disabled");
                    }

                }

                if ($(this).val().length < 4) {
                    $(".user-login").attr("disabled", "disabled");
                        $(this).removeClass("is-valid");
                }

                $(this).blur(function(){
                    if ($(this).val().length == '') {
                        $(this).removeClass("is-invalid").removeClass("is-valid");
                    }
                });
            })

            //发送验证码
            $(document).on('click','.btn-send-code',function() {
                $.ajax({
                    url: "{{ route('user.verifiCode') }}",
                    type: "POST",
                    data: {
                        "sendVerificode" : true,
                        "verification_key" : $('#reKey').val(),
                        "cellphone" : $('#cellphone').val(),
                        "country" : $('#country').val()
                    },
                    success:function(data){
                        $('#reKey').val(data['verification_key']);
                        $('.btn-send-code').attr("disabled", "disabled");
                        localStorage.setItem("isSended", data['verification_key']);
                        layer.open({
                            content: '短信验证码发送成功',
                            skin: 'msg',
                            time: 3 //2秒后自动关闭
                        });
                        reloadText();
                        // $('.input-cellphone').hide();
                        // $('#cellphone').val(data['cellphone']);
                        // $('#reKey').val(data['verification_key']);
                        // $('.verifi-code').show();
                        // reloadText()
                    }
                })
            })

            //重置发送验证码按钮
            function reloadText() {
                $('.btn-send-code').html("<small><i>60</i>秒后重发</small>");
                var time = setInterval(function() {
                    $('.btn-send-code i').text(parseFloat($('.btn-send-code i').text() - 1));
                    if($('.btn-send-code i').text() < 1 ) {
                        $('.btn-send-code').html("重发验证码");
                        $('.btn-send-code').removeAttr("disabled","disabled");
                        clearInterval(time);
                    }
                },1000)
            }

            //检测是否刷新
            $.ajax({
                url: "{{ route('user.checkResendTime') }}",
                type: "POST",
                data: {
                    "checkkey" : localStorage.getItem("isSended")
                },
                success:function(data){
                    $('#cellphone').val(data['cellphone']);
                    $('#reKey').val(data['verification_key']);
                    if(data['reminde_time'] > 1) {
                        $('.btn-send-code').html("<small><i></i> 秒后重发</small>");
                        $('.btn-send-code i').text(data['reminde_time']);
                        var time = setInterval(function() {
                            $('.btn-send-code i').text(parseFloat($('.btn-send-code i').text() - 1));
                            if($('.btn-send-code i').text() < 1 ) {
                                $('.btn-send-code').text("重发验证码");
                                $('.btn-send-code').removeAttr('disabled');
                                clearInterval(time);
                            }
                        },1000)
                    }
                    //如果历史号码通过验证
                    if(isPhoneNo($('#cellphone').val()) && $('.btn-send-code i').text() < 1) {
                        $('.btn-send-code').removeAttr('disabled');
                    }
                }
            })

            //登陆/注册
            $(document).on('click','.user-login', function() {
                $.ajax({
                    url: "{{ route('user.verifiCode') }}",
                    type: "POST",
                    data: {
                        "verificode" : true,
                        "verificode_num" : $('#vificode').val(),
                        "verification_key" : $('#reKey').val(),
                        "cellphone" : $('#cellphone').val(),
                        "token" : $('meta[name="csrf-token"]').attr('content'),
                        "promote_user_id" : localStorage.getItem("promote_user_id")
                    },
                    success:function(data){
                        if(data['error'] === 'code401') {
                            layer.open({
                                content: '验证码错误'
                                ,skin: 'msg'
                                ,time: 3 //2秒后自动关闭
                            });
                        }
                        if(data['error'] === 'code402') {
                            layer.open({
                                content: '验证码过期'
                                ,skin: 'msg'
                                ,time: 3 //2秒后自动关闭
                            });
                        }
                        if(data['info'] == 'creat' || data['info'] == 'login') {
                            window.location.href = '{{ route('recharge.index') }}';
                        }
                    }
                })

            })
        })
    </script>
@endpush
